<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr mb10">
                    <span class="s1 mr10">{{
                        $t('basics.SelectedOrNot')
                    }}</span>
                    <p class="mr20">
                        <a-select
                            :style="{ width: '100px' }"
                            v-model="obj.is_checked"
                        >
                            <a-option
                                v-for="item of data"
                                :value="item.value"
                                :label="item.label"
                            />
                        </a-select>
                    </p>
                    <a-button class="mr20" type="primary" @click="getUserTask">
                        <icon-search class="mr6" />
                        {{ $t('basics.search') }}
                    </a-button>
                    <a-button class="mr20" type="primary" @click="importButton">
                        {{ $t('basics.shangchuan') }}
                    </a-button>
                </div>
            </div>
            <div class="container-content">
                <div class="container-content-table">
                    <a-table
                        :stripe="true"
                        :columns="columns"
                        :data="userTaskList"
                        :pagination="false"
                    >
                        <template #is_checked="{ record }">
                            {{
                                record.is_checked
                                    ? $t('basics.yes')
                                    : $t('basics.no')
                            }}
                        </template>

                        <template #operate="{ record }">
                            <a-link @click="detail(record)" :disabled="disable">
                                {{ $t('basics.xiangqing') }}</a-link
                            >
                            <a-link
                                @click="changeStatus(record)"
                                :disabled="disable"
                            >
                                {{ $t('basics.SetAsSelected') }}</a-link
                            >
                            <a-link
                                @click="deleted(record, 'shanchu')"
                                status="danger"
                                :disabled="disable"
                            >
                                {{ $t('basics.shanchu') }}</a-link
                            >
                        </template>
                    </a-table>
                </div>
            </div>

            <ma-import
                :render-to-body="false"
                ref="crudImportRef"
                :upLoadData="importFile"
                :isShowLoad="true"
                :isShowType="true"
                @success="refresh"
                :downLoadData="downFile"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import {
    getProjectId,
    resendTemplate,
    myDelete,
    getDetailPageList,
    setIsChecked
} from '@/api/cloud/userProject.js';
import MaImport from './components/import.vue';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();
const disable = ref(false);
const { proxy } = getCurrentInstance();
const crudImportRef = ref();
const form = ref({});
const obj = ref({
    page: 1,
    pageSize: 20,
    is_checked: ''
});
const loading = ref(false);
const userTaskList = ref([]);
const projectName = ref();
const data = ref([
    { label: t('basics.yes'), value: 1 },
    { label: t('basics.whole'), value: '' },
    { label: t('basics.no'), value: 0 }
]);
const downFile = ref({
    url: 'cloud/resendTemplate/download'
});
const columns = [
    {
        title: t('basics.xuhao'),
        dataIndex: 'id',
        minWidth: 60
    },
    {
        title: t('basics.TemplateName'),
        dataIndex: 'template_name',
        minWidth: 180,
        slotName: 'began_at',
        ellipsis: true,
        tooltip: true
    },
    {
        title: t('basics.SelectedOrNot'),
        dataIndex: 'is_checked',
        minWidth: 100,
        slotName: 'is_checked',
        ellipsis: true,
        tooltip: true
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        width: 180,
        slotName: 'operate'
    }
];
const detail = (item) => {
    router.push({ path: `/cloud/resendDetail`, query: { id: item.id } });
    getDetailPageList({ template_id: item.id }).then((res) => {});
};
const changeStatus = (item) => {
    disable.value = true;
    setIsChecked({ id: item.id }).then((res) => {
        Message.success(res.message);
        disable.value = false;
        getUserTask();
    });
};
// 获取美国短信id
const getId = () => {
    getProjectId({ project_key: 'america' }).then((res) => {
        form.value.project_id = res.data.id;
        projectName.value = res.data.project_name;
        getUserTask();
    });
};

const deleted = (item, modeals) => {
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.ninuqeding') + t(`basics.${modeals}`) + '?',
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            disable.value = true;
            myDelete({ ids: [item.id] }).then((res) => {
                Message.success(res.message);
            });
        }
    });
};
const importButton = (params) => {
    crudImportRef.value.open();
};

//   导入成功后
const refresh = () => {
    getUserTask();
};

const importFile = ref({
    url: 'cloud/resendTemplate/import',
    params: form.value
});

const getUserTask = () => {
    loading.value = true;

    resendTemplate(obj.value).then((res) => {
        userTaskList.value = res.data.items;
        loading.value = false;
    });
};

getId();
</script>
<script>
export default { name: 'cloud:resend' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
